import React, {useCallback, useState, useEffect} from 'react';
import {SafeAreaView} from 'react-native';
import ProductDetail from '../../component/product/ProductDetail';
import StatusBar from '../../component/base/StatusBar';
import {http, api} from '../../http';

const Product = props => {
  const {route, navigation} = props;
  if (!(route.params && route.params.product)) {
    navigation.navigate('home-root');
  }
  let productName = 'Stylish-Solid-Lace-Design-Invisible-Socks-378288';
  if (route.params.product && route.params.product.product_url) {
    productName = route.params.product.product_url;
  }
  // console.log(route.params, 'route.params');
  const [list, setList] = useState([
    route.params.product,
    {product_id: 'none'},
  ]);
  // const [list, setList] = useState([]);
  const [isLoading, setIsloading] = useState(false);
  const [page, setPage] = useState(1);
  const onLoadMore = useCallback(() => {
    if (isLoading) {
      return false;
    }
    setIsloading(true);
    // console.log('loadmore.....', page);
    const params = {
      page: page,
      page_size: 10,
      product_name: productName,
    };
    // setList(data);
    http.get(api.RECOMMENDATION, params).then(res => {
      if (res) {
        console.log(res, 'data....');
        // 商品列表数据
        setList(v => [...v, ...res.recommend_products]);
        setPage(v => v + 1);
        setIsloading(false);
      }
    });
  }, [page, isLoading, productName]);
  useEffect(() => {
    onLoadMore();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  console.log(list.length);
  return (
    <SafeAreaView>
      <StatusBar />
      {/* <ProductList /> */}
      <ProductDetail
        list={list}
        onLoadMore={onLoadMore}
        isLoading={isLoading}
      />
    </SafeAreaView>
  );
};

export default Product;
